<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blend Text</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .main-wrap {
        height: 100vh;
        display: flex;
        overflow: hidden;
        position: relative;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(225deg, black 0, black 50%, #fff 50%);
    }

    .title {
        color: #fff;
        font-size: 4rem;
        transition: all 1s;
        mix-blend-mode: difference;
    }

    .title:hover {
        transform: translateX(10rem);
    }
    </style>
</head>

<body>
    <div class="main-wrap">
        <div class="title">这是一个文本混合DEMO</div>
    </div>
</body>

</html>